<template>
  <div class="stage-items">
    <div class="simple-datepick">
      <span class="label">付款日期(第{{ index + 1 }}期)</span>
      <el-date-picker
        v-model="selectData"
        type="date"
        placeholder="选择日期"
        format="yyyy/MM/dd"
        value-format="timestamp" />
    </div>
    <div v-if="showDeleteBtn && index !== 0" class="delete-btn" @click="deleteFun">删除</div>
  </div>
</template>
<script>
export default {
  name: 'StagesDatePicker',
  model: {
    prop: 'params',
    event: 'change'
  },
  props: {
    params: {
      type: Number | String,
      default: () => {
        return null;
      }
    },
    index: {
      type: Number,
      default: null
    },
    showDeleteBtn: {
      type: Boolean,
      default: true
    },
    rules: {
      type: Object | Array,
      default: () => {
        return null;
      }
    },
    propName: {
      type: String,
      default: ''
    }
  },
  computed: {
    selectData: {
      get() {
        return this.params;
      },
      set(val) {
        this.$emit('change', val);
      }
    }
  },
  methods: {
    deleteFun() {
      this.$emit('delete', this.index);
    }
  }
};
</script>
<style lang="scss" scoped>
@import url('./common.scss');
.stage-items {
  display: flex;
  & ::v-deep {
    .simple-datepick {
      .el-input__inner {
        // border: none;
        // padding: 0;
        // height: 30px;
        // line-height: 30px;
        // min-width: 100px !important;
        // width: 100px;
        // max-width: 100px;
        // font-size: 14px;
      }
    }
    .el-form-item {
      &.is-success {
        .el-input__inner {
          border: none !important;
        }
      }
    }
  }
  .simple-datepick {
    // display: inline-flex;
    // align-items: center;
    // height: 32px;
    // border: 1px solid #DDDDDD;
    // border-radius: 4px;
    // height: 40px;
    .label {
      display: inline-block;
      // width: 120px;
      text-align: right;
      color: #666;
      font-size: 14px;
      margin: 0 12px 0 0;
    }
  }
}
::v-deep .el-input__icon {
  font-size: 14px;
}
</style>
<style lang="scss">
.simple-datepick {
  & ::v-deep {
    .el-form-item.is-success .el-input__inner {
      border: none !important;
    }
  }
}
</style>
